<template>
  <el-main>
    <Navbar></Navbar>
    <el-row :gutter="0">
      <el-col>
        <div class="filter-container">
          <el-select v-model="selectedMenu.title" placeholder="请选择">
            <el-tree :data="allMenuTree" :props="menuDefaultProps" @node-click="handleMenuTreeNodeClick">
            </el-tree>
            <el-option style="display: none" value=""></el-option>
          </el-select>
          <el-input placeholder="菜单名称" v-model="queryString" style="width: 200px;" class="filter-item"></el-input>
          <el-button @click="search()" class="dalfBut">查询</el-button>
          <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
        </div>
        <el-table size="small" current-row-key="id" :data="childrenMenuList" stripe highlight-current-row>
          <el-table-column type="index" align="center" label="序号"></el-table-column>
          <el-table-column prop="id" align="center" label="ID"></el-table-column>
          <el-table-column prop="title" label="菜单名称" align="center"></el-table-column>
          <el-table-column prop="linkUrl" label="访问路径" align="center"></el-table-column>
          <el-table-column prop="path" label="菜单路由" align="center"></el-table-column>
          <el-table-column prop="priority" label="优先级" align="center"></el-table-column>
          <el-table-column prop="description" label="描述" align="center"></el-table-column>
          <el-table-column type="icon" prop="icon" label="图标" align="center">
            <template slot-scope="scope">
              <i class="fa" :class="scope.row.icon"></i>
            </template>
          </el-table-column>
          <el-table-column prop="parentMenuId" label="父级菜单ID" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
              <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
import { getAllMenusToTree, getMenus, deleteMenu } from '@/api' // 引入删除菜单的API

export default {
  data() {
    return {
      // 被选中的菜单
      selectedMenu: {
        title: "传智健康",
        parentMenuId: null,
        children: this.allMenuTree
      },
      // 查询条件
      queryString: '',
      // 以树形结构组合的所有菜单
      allMenuTree: [],
      // 设置树形菜单对应属性
      menuDefaultProps: {
        // 子节点的属性名称
        children: 'children',
        // 显示的名字
        label: 'title'
      },
      // 页面右边菜单列表的信息
      childrenMenuList: [],
    }
  },
  methods: {
    // 查询
    search() {
      getMenus({
        queryString: this.queryString
      }).then((res) => {
        if(res.data.flag) {
          // 刷新展示菜单
          this.childrenMenuList = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 新建
    handleCreate() {
      console.log('新建')
    },
    // 删除
    // handleDelete(row) {
    //   this.$confirm('确定要删除该菜单吗？', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     deleteMenu({ id: row.id }).then((res) => {
    //       if (res.data.flag) {
    //         this.$message.success('删除成功')
    //         // 刷新数据
    //         this.search()
    //       } else {
    //         this.$message.error(res.data.message)
    //       }
    //     })
    //   }).catch(() => {
    //     this.$message.info('已取消删除')
    //   })
    // },
    // 编辑
    handleUpdate(row) {
      console.log('编辑')
    },
    // 点击树形菜单后需要做的事
    handleMenuTreeNodeClick(data) {
      this.selectedMenu = data
      // 将该菜单下的子菜单显示到页面中
      this.childrenMenuList = data.children
    },
  },
  created() {
    getAllMenusToTree().then((res) => {
      if(res.data.flag) {
        // 刷新树形菜单
        this.allMenuTree = [
          {
            title: "传智健康",
            parentMenuId: null,
            children: res.data.data
          }
        ]
        this.childrenMenuList = res.data.data
      } else {
        this.$message.error(res.data.message)
      }
    })
  }
}
</script>

<style lang="less">
</style>